<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡槽--作用域</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <child>
    <template slot-scope="props">
        <h1>{{props.item}}</h1>
    </template>
  </child>

</div>
<script type="text/javascript">

  Vue.component('child',{
    data:function () {
      return {
        list:[1,2,3,4]
      }
    },
    template:`
        <div>
            <ul>
                <slot v-for="item in list" :item="item">
                </slot>
            </ul>
        </div>
    `
  })

  var vm = new Vue({
    el: '#vue_det'
  })
</script>
</body>
</html>
